<template>
  <div class="treeTableDemo">
    <el-row style="height: 100%">
      <el-col style="height: 100%" :span="4">
        <tree :selected-node="selectedNode" @treeNodeClick="treeNodeClick" />
      </el-col>
      <el-col :span="20">
        <tableDome :tree-node-row="treeNodeRow" @changeNode="changeNode" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TreeTableDemo',
  components: {
    tree: () => import('./tree'),
    tableDome: () => import('./table')
  },
  data() {
    return {
      selectedNode: {}, // 表格点击行相对应选中树节点的数据
      treeNodeRow: {} // 点击的树节点数据
    }
  },
  methods: {
    treeNodeClick(row) {
      this.treeNodeRow = row
    },
    changeNode(row) {
      this.selectedNode = row
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/tree.scss';
</style>
